<template>
    <div class="selected-user" v-if="isShowSelectUser">
        <div class="layer-header-box white-bg"><!--邀请-->
            <span class="icon-back" @click="close"></span>
            {{ $t('select_user') }}
            <span class="font-size15 write-btn-right" v-if="checkedNames.length == 0">{{ $t('group_complete') }}</span><!--完成-->
            <span class="font-size15 write-btn-right cur" @click="completeSelect" v-if="checkedNames.length != 0">{{ $t('group_complete') }}({{ checkedNames.length }})</span>
        </div>
        <div style="height: calc(100% - 100px);" class="body-content" :class="{'height-100' : total === 0}">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <van-list
                v-model="isLoading"
                :finished="finished"
                :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                loding-text="loading"
                @load="getAddMemberList"
                >
                    <div>
                        <div class="userSearch-input"><!--用户名/全名/部门/职级-->
                            <input type="text" :placeholder="$t('search_tips_1')" @keyup="searchUser" v-model="searchContent">
                            <i class="input-delete-box-01" @click="deleteSearch()" v-if="searchContent.length > 0"><i class="input-delete-icon-01"></i></i>
                        </div>
                        <ul class="userSearch-list-select">
                            <li v-for="(item, index) in memberList" :key="index">
                                <label :for="index">
                                    <div class="select-box clearfix">
                                        <div class="select-radio">
                                            <input type="checkbox" hidden :id="index" :value="item" v-model="checkedNames">
                                            <span></span>
                                        </div>
                                        <div class="border-box">
                                            <div class="border-box-2">
                                                <div class="img-box">
                                                    <img :src="appUrl + item.usr_photo" alt="">
                                                </div>
                                                <div class="title-box">
                                                    <p style="display: inline-block;">{{item.usr_display_bil}}</p>
                                                    <div><span class="margin-right5">{{ item.usg_display_bil }}</span><span>{{ item.ugr_display_bil == 'Unspecified' ? '' : item.ugr_display_bil }}</span></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </label>
                            </li>
                        </ul>
                        <!--暂无数据-->
                        <div v-if="total === 0" class="white-bg" style="height: 300px;">
                            <div class="box-table" style="width:100%;height:100%;">
                                <div class="box-table-cell" style="text-align: center;">
                                    <div class="no-data">
                                        <img src="../../../static/images/no-data.png" alt=""/>
                                        <p class="color999">{{ $t('no_data') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script>
export default {
    name: 'SelectUser',
    props: {
        isShowSelectUser: {
            type: Boolean,
            default: true
        },
        userList: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            searchContent: '',
            memberList: [],
            checkedNames: this.userList,
            total: 0,
            pageNo: 1,
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        completeSelect() {
            this.$emit('update:userList', this.checkedNames);
            this.close();
        },
        close() {
            this.$emit('update:isShowSelectUser', !this.isShowSelectUser);
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.memberList = [];
                this.pageNo = 1;
                this.getAddMemberList();
                this.isRefresh = false;
            }, 900);
        },
        /*用户搜索*/
        searchUser() {
            clearTimeout(this.indTime);
            this.indTime = setTimeout(() => {
                this.pageNo = 1;
                this.memberList = [];
                this.getAddMemberList();
            }, 500);
        },
        deleteSearch() {
            this.searchContent = '';
            this.pageNo = 1;
            this.memberList = [];
            this.getAddMemberList();
        },
        getAddMemberList() {
            this.$axios({
                method: 'GET',
                url: '/app/api/trainee/user/getInstructors',
                params: {
                    pageNo: this.pageNo,
                    searchContent: this.searchContent
                }
            }).then(res => {
                if (res.data.rows && res.data.rows.length !== 0) {
                    this.memberList = [...this.memberList, ...res.data.rows];
                }
                this.total = res.data.total;
                this.isLoading = false;
                this.pageNo++;
                if (this.memberLis.length >= this.total) {
                    this.finished = true;
                }
            });
        }
    },
    created() {
        if (this.isShowSelectUser) {
            this.getAddMemberList();
        }
    }
};
</script>

<style scoped>

</style>
